

<template>
  <!-- <li
   :class="isEnter?'active':'' "
   @mouseenter="mounseenter"
   @mouseleave="mounseleave"
   > -->
  <li
    :class="isEnter ? 'active' : ''"
    @mouseenter="mounseChange('enter')"
    @mouseleave="mounseChange('leave')"
  >
    <label>
      <input type="checkbox" :checked="done" @click="singleCheckHandle(id)" />
      <span>{{ title }}</span>
    </label>
    <button 
    class="btn btn-danger" :class="isEnter ? 'active' : ''"
    @click="deleteData(id)"
    >
      删除
    </button>
  </li>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      isEnter: false,
    };
  },
  props: ["id", "done", "title", "singleCheckHandle", "deleteData"],
  methods: {
    // mounseenter() {
    //   this.isEnter = true;
    // },
    // mounseleave() {
    //   this.isEnter = false;
    // },
    mounseChange(change) {
      //根据传入的参数判断数据改变
      this.isEnter = change === "enter";
    },
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
/* 列表与按钮的样式是同步的 */
li.active {
  background-color: #ccc;
}
/* li上有active类名的按钮 显示 */
li.active button {
  display: block;
}
</style>